<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="100px">
    <el-form-item>
      <div style="color: red;" prop="googleKey" v-if="!isBind">请使用Google身份验证器扫描二维码或者手动输入Google密钥</div>
    </el-form-item>
    <el-form-item label="Google密钥:" prop="googleKey">
      {{form.googleKey}}
    </el-form-item>
    <el-form-item label="二维码:" prop="googleKey" v-if="!isBind">
      <div id="qrcode" ref="qrcode"></div>
    </el-form-item>
    <el-form-item label="Google Code" prop="googleCode">
      <el-input v-model="form.googleCode" placeholder="请输入GoogleCode" style="width: 300px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="bind" v-if="!isBind">绑定</el-button>
      <el-button type="danger" size="mini" @click="unbind" v-else>解绑</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getUserExt, getGoogleKey, bindGoogle, unbindGoogle } from "@/api/system/user";
import QRCode from 'qrcodejs2'
export default {
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      isBind: false,
      form: {
        googleKey: undefined,
        googleCode: undefined
      },
      // 表单校验
      rules: {
      }
    };
  },
  mounted() {
    this.getUserExt()
  },
  methods: {
    creatQrCode() {
      this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
      let text = "otpauth://totp/FexCloud?secret=" + this.form.googleKey;
      var qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: 140,
        height: 140,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
    getUserExt(){
      getUserExt().then(res => {
        if(res.data && res.data.googleKey){
          this.form.googleKey = res.data.googleKey
          this.isBind = true
        } else {
          this.isBind = false
          this.getGoogleKey()
        }
      })
    },
    getGoogleKey(){
      getGoogleKey().then(res => {
        this.form.googleKey = res.msg
        this.creatQrCode()
      })
    },
    bind() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          bindGoogle(this.form).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess("绑定成功");
              this.form.googleCode = "";
              this.getUserExt();
            } else {
              this.$modal.msgError(response.msg)
            }
          });
        }
      });
    },
    unbind() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          unbindGoogle(this.form).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess("解绑成功");
              this.form.googleCode = "";
              this.getUserExt()
            } else {
              this.$modal.msgError(response.msg)
            }
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    }
  }
};
</script>
